  <style type="text/css">
	#main{
		position:fixed!important;
		right: 0px;
		bottom: 0px;
		top: 0px;
		left: 0px;
		padding:0;
		padding-bottom: 42px;
	}
	#content{
		padding:0px;
		height:100%;
	}
	.mui-table-view {
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
		padding-left: 0;
		list-style: none;
		background-color: #fff;
		outline: 0;
	}
	.mui-table-view:before {
		position: absolute;
		right: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
		top: -1px;
	}
	.mui-table-view:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.mui-table-view .mui-media, .mui-table-view .mui-media-body {
		overflow: hidden;
	}
	.mui-table-view-cell {
		position: relative;
		overflow: hidden;
		padding: 11px 15px;
		-webkit-touch-callout: none;
	}
	.mui-table-view-cell:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 15px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.mui-table-view-cell>a:not(.mui-btn) {
		position: relative;
		display: block;
		overflow: hidden;
		margin: -11px -15px;
		padding: inherit;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: inherit;
	}
	a {
		background: 0 0;
	}
	.mui-table-view .mui-media-object.mui-pull-left {
		margin-right: 10px;
	}
	.mui-table-view .mui-media-object {
		line-height: 42px;
		max-width: 42px;
		height: 42px;
	}
	.mui-pull-left {
		float: left;
	}
	.mui-table-view .mui-media, .mui-table-view .mui-media-body {
		overflow: hidden;
		font-size:17px;
	}
	.mui-table-view .mui-media, .mui-table-view .mui-media-body p{
		overflow: hidden;
		font-size:11px;
	}
	.mui-table-view-cell p {
		margin-bottom: 0;
	}
	.mui-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: break-all;
	}
	@media only screen and (max-width: 479px) and (min-width: 320px){
		.jarviswidget header h2 {
			width: 70%;
		}
	}
	.mui-ellipsis-2{
		display:-webkit-box;
		overflow:hidden;
		white-space:normal!important;
		text-overflow:ellipsis;
		word-wrap:break-word;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		word-break: break-all;
	}
	.mui-table-view-cell>.mui-slider-right {
		right: 0;
		-webkit-transition: -webkit-transform 0ms ease;
		transition: transform 0ms ease;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	.mui-table-view-cell>.mui-slider-left, .mui-table-view-cell>.mui-slider-right {
		position: absolute;
		top: 0;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		height: 100%;
	}
	.anchorBL{
		display:none;
	}
 </style> 
	<!-- row -->

	<div class="row" style="overflow-y: hidden;height:100%;padding-bottom:10px">

		<div class="col col-12" style="height: 100%;"  id="echarts_main">
		
		</div>
			
	</div>

	<!-- end row -->


<script type="text/javascript">

	var myChart = echarts.init(document.getElementById('echarts_main'));
	var busDataReflash;
	function loadBusData(){
		console.log("reflash");
		$.getJSON('//api.waitbus.com/v3/?mothed=getBusesVelocity' + "&token=" + token, function (data) {
			var points = data.result;
			myChart.setOption(option = {
				series: [{
					data: points
				}]
			});
		});
	}
	var pagefunction = function() {
		myChart.setOption({
			animation: true,
			bmap: {
				center: [116.98, 36.67],
				zoom: 13,
				roam: true
			},
			visualMap: {
				show: false,
				top: 'top',
				min: 0,
				max: 5,
				seriesIndex: 0,
				calculable: true,
				inRange: {
					color: ['blue', 'blue', 'green', 'yellow', 'red']
				}
			},
			series: [{
				type: 'heatmap',
				coordinateSystem: 'bmap',
				pointSize: 5,
				blurSize: 6
			}]
		});
		var bmap = myChart.getModel().getComponent('bmap').getBMap();
		bmap.addControl(new BMap.MapTypeControl());
		loadBusData();
		busDataReflash = setInterval(function(){loadBusData()}, 5000);
	};
	
	// end pagefunction

	// destroy generated instances 
	// pagedestroy is called automatically before loading a new page
	// only usable in AJAX version!

	var pagedestroy = function(){
		
		/*
		Example below:

		$("#calednar").fullCalendar( 'destroy' );
		if (debugState){
			root.console.log("✔ Calendar destroyed");
		} 

		For common instances, such as Jarviswidgets, Google maps, and Datatables, are automatically destroyed through the app.js loadURL mechanic

		*/
		 clearInterval(busDataReflash);
	}

	// end destroy
	
	// run pagefunction
	pagefunction();
	
</script>




